<template>
    <div>
      <div class="tinput">
        <p><input type="text"></p>
        <p class="youhui"><span>共{{juan}}张优惠券</span><span class="bor">淘宝查卷指南》</span></p>
      </div>
      <div class="re">
        <p><img :src="minlog" alt="">正在热搜</p>
        <ul>
          <li v-for="(v,i) in imgs" :key="i"><img :src="v" alt=""></li>
        </ul>
      </div>
      <div class="re">
        <p><img :src="tominlog" alt="">商品分类</p>
        <ul>
          <li v-for="(v,i) in imgs" :key="i"><img :src="v" alt=""></li>
        </ul>
      </div>
      <my-footer></my-footer>
    </div>
</template>
<script>
import MyFooter from '@/components/MyFooter'
export default {
  data () {
    return {
      juan:"322222222",
      ni:"223222",
      imgs:["../../static/imgs/找券-2.png","../../static/imgs/找券-2.png","../../static/imgs/找券-2.png","../../static/imgs/找券-2.png","../../static/imgs/找券-2.png","../../static/imgs/找券-2.png"],
      minlog:"../../static/imgs/找券-1.png",
      tominlog:"../../static/imgs/找券-3.png"
    }
  },
  components: {
    MyFooter,
  }
}
</script>

<style scoped>
.tinput{
  background: #00a0e9;
}
.tinput input{
  outline: none;
  border: none;
  background: rgb(71,185,236,.9);
  width: 90%;
  margin-top: 10px;
  height: 30px;
  border-radius: 10px;
}
.tinput .youhui{
  font-size:13px;
  display:flex;
  width:90%;
  margin: 0 auto;
  padding: 25px 0 25px 0;
  justify-content: space-between;
  color:#fff;
}
.tinput .youhui .bor{
  border:1px solid #fff;
  border-radius:15px;
  padding:2px;
}
.re p{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  margin-left:10px;
  margin-top:10px;
}
.re ul{
  display:flex;
  flex-wrap:wrap;
  margin:5px;
}
.re ul li{
  width:30%;
  margin: 5px;
}
.re ul li img{
  width:100%;
}
</style>
